<template style="height: 100%;">
  <div id="author-writing">
    <el-input placeholder="请输入标题名称" v-model="article.articleName" />
    <div style="margin-top:10px;"></div>
    <div style="margin-top:10px;height: 70%;width:100%">
      <!-- <Editor ref="editor" v-model="article.content" @setNum="setNum" /> -->
      <textarea id="text-area" v-model="article.content"></textarea>
    </div>
    <div style="width: 100%;margin:10px auto;">
      <el-button type="primary" @click="submitVisible = true" style="margin:auto; width: 100%;">提交</el-button>
    </div>
    <template>
      <el-dialog
        v-dialogDrag
        :visible.sync="submitVisible"
        width="80%"
        append-to-body
        center
        title="提交"
      >
        <el-form
          :inline="true"
          :model="article"
          class="demo-form-inline"
          style="height : 500px;overflow:auto"
          label-position="top"
        >
          <el-form-item label="文章类型：">
            <el-select v-model="types" filterable placeholder="类型" multiple>
              <el-option
                v-for="each in articleTypes"
                :key="each.id"
                :label="each.typeName"
                :value="each.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字符数 ：">
            <el-input placeholder="请输入内容" v-model="article.content.length" :disabled="true"></el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            action="/api/fileUtils/upload"
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">请上传一张标题图片(只能上传jpg/png文件)</div>
          </el-upload>
          <el-form-item label="简介 ：" style="width:100%">
            <textarea id="introduction" placeholder="请输入内容" v-model="article.introduction"></textarea>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import Editor from "../../../Editor.vue";
export default {
  components: {
    // Editor: Editor,
  },
  data() {
    return {
      articleId: "",
      submitVisible: false,
      article: {
        authorId: "",
        articleName: "",
        content: "",
        articleTypes: [],
        num: 0,
        introduction: "",
        coverPic: "",
      },
      types: [],
      articleTypes: [],
      fileList:[],
    };
  },
  methods: {
    // 提交事件
    submit() {
      if (this.article.articleName === "") {
        this.$message({
          message: "文章名称不能为空",
          type: "warning",
        });
        return;
      }
      if (this.article.content.length === 0) {
        this.$message({
          message: "文章内容不能为空",
          type: "warning",
        });
        return;
      }
      if (this.types.length === 0) {
        this.$message({
          message: "请选择文章类型",
          type: "warning",
        });
        return;
      }
      this.article.num = this.article.content.length;
      this.types.forEach((e) => {
        this.article.articleTypes.push({ id: e });
      });
      var user = JSON.parse(localStorage.user);
      this.article.authorId = user.id;
      // 提交到服务器
      this.COMMON.httpPost(
        this,
        "articleOperation/alter",
        this.article,
        (result) => {
          if (result.result === "SUCCESS") {
            // 数据插入成功时的操作，跳转到工作台
            this.$router.push({ path: "/index/Console" });
          }
        },
        (result) => {}
      );
    },
    uploadSuccess(res, file) {
      if (res.result == "SUCCESS") {
        this.article.coverPic = res.detail;
      } else {
        this.$message.error("图片插入失败");
      }
    },
    uploadError() {
      this.$message.error("图片插入失败");
    },
    handleExceed(files, fileList) {
      this.$message.warning("当前限制选择 1 个文件");
    },
    setNum(num) {
      this.article.num = num;
    },
    // 获取文章类型
    getTypes() {
      this.COMMON.httpPost(
        this,
        "articleTypeOperation/selectList",
        { del: "0", available: "1" },
        (result) => {
          if (result.result === "SUCCESS") {
            this.articleTypes = result.list;
          }
        },
        (result) => {}
      );
    },
    getArticle() {
      this.COMMON.httpPost(
        this,
        "articleOperation/getArticleById",
        { del: "0", available: "1",id:this.articleId},
        (result) => {
          if (result.result === "SUCCESS") {
            this.article = result.data;
            var ids = [];
            this.article.articleTypes.forEach(e=>{
                ids.push(e.id);
            });
            this.types = ids;
            this.fileList.push({url:this.GLOBAL.BASE_URL + 'image/' +this.article.coverPic});
          }
        },
        (result) => {}
      );
    },
  },
  mounted() {
    this.articleId = this.$route.params.id;
    this.getArticle();
    this.getTypes();
  },
};
</script>

<style>
#author-writing {
  overflow: auto;
  height: 100%;
  width: 70%;
  margin: 20px auto;
}
#introduction {
  scrollbar-face-color: #ff80ff;
  border: 1px solid gainsboro;
  overflow: auto;
  width: 90%;
  height: 10%;
  margin: auto;
  outline: none;
  font-size: 18px;
}
#text-area {
  scrollbar-face-color: #ff80ff;
  border: 0px;
  overflow: auto;
  height: 90%;
  width: 100%;
  margin: auto;
  outline: none;
  font-size: 20px;
}
</style>